import React, { PureComponent } from 'react';
import DetailHead from './DetailHead';
import DetailTab from './DetailTab';
import DetailDynamic from './DetailDynamic';
import {
  requestLoanItem,
  requestLogList
} from '../../reducer/MyProjectAction';
import { Loading } from '@alifd/next';

import './BasicDetail.scss';


export default class BasicDetail extends PureComponent {
  static displayName = 'BasicDetail';

  constructor(props) {
    super(props);
    this.state = {
      basicDetail: {},
      logList: {},
      loading: false
    }
  }

  componentWillReceiveProps(nextProps) {
    const {basicDetail} = this.state;
    if (!basicDetail || !basicDetail.data) {
        return false;
    }
    let itemApplyId = basicDetail && basicDetail.data && basicDetail.data.itemApplyId;
    let nextItemApplyId = nextProps.itemApplyId;
    if (nextItemApplyId !== itemApplyId) {
        this.onRefresh(nextItemApplyId);
    }
  }

  componentDidMount() {
    this.onRefresh(this.props.itemApplyId);
  }

  refreshLoanItem = () => {
    let that = this;
    this.setState({
      loading: true
    })
    try {
      requestLoanItem(this.props.itemApplyId)
      .then((model) => {
        //console.log('model===',model);
        that.setState({
          basicDetail: model,
          loading: false
        })
      })
      .catch((error) => {})
    } catch (error) {}
  }

  onRefresh = (itemApplyId) => {
    let that = this;
    this.setState({
      loading: true
    })
    Promise.all([requestLoanItem(itemApplyId),requestLogList()])
    .then((result) => {
      //console.log('result===',result)
      that.setState({
        basicDetail: result[0],
        logList: result[1],
        loading: false
      })
    })
    .catch((error) => {})
    
  }

  render() {
    const {loading, basicDetail, logList} = this.state;
    const {hideShow} = this.props;

    return (
      <Loading visible={loading} fullScreen shape="fusion-reactor">
        <div className="nb-detail-wrapper">
          <div className="nb-detail-content">

            <DetailHead hideShow={hideShow} basicDetail={basicDetail}/>

            <div className="detail-content-wrapper">
              <div className="detail-content-left">
                <DetailTab basicDetail={basicDetail} refreshLoanItem={this.refreshLoanItem}/>
              </div>

              <div className="detail-content-right">
                <DetailDynamic logList={logList}/>
              </div>
            </div>
          </div>
        </div>
      </Loading>
    );
  }
}